<p><button type="button" class="btn btn-default" ng-hide="pinoutImageSource" ng-click="pinoutLoad()">Show pinout</button></p>
<p ng-show="pinoutImageSource"><img ng-src="{{pinoutImageSource}}" class="img-responsive" /></p>
<p ng-show="pinoutSecondarySource"><img ng-src="{{pinoutSecondarySource}}" class="img-responsive" /></p>
<div class="row gpio">
    <div class="col-lg-2 col-sm-3" ng-repeat="pin in pins">
        <div class="panel panel-default">
        <div class="panel-heading"><b>Pin {{pin.id}}</b></div>
        <form class="panel-body">
            <div class="form-group">
                <label for="pin-{{pin.id}}-mode">Mode: </label>
                <select id="pin-{{pin.id}}-mode" class="form-control" ng-model="pin.mode" ng-options="mode for mode in pin.getModes()" ng-change="pin.modeChange()" />
            </div>
            
            <div class="form-group" ng-show="pin.pullShow()">
                <label for="pin-{{pin.id}}-pull">Pull: </label>
                <select id="pin-{{pin.id}}-pull" class="form-control" ng-model="pin.pull" ng-options="pull for pull in pin.pulls" ng-change="pin.pullChange()" />
            </div>
            
            <div class="form-group">
                <label for="pin-{{pin.id}}-value">Value: </label>
                <input type="number" id="pin-{{pin.id}}-value" min="0" max="{{pin.range}}" class="form-control" ng-model="pin.value" ng-change="pin.valueChange()" ng-readonly="pin.valueReadonly()" />
            </div>
            
            <div class="form-group" ng-show="pin.toggleShow()">
                <button type="button" class="btn btn-default" ng-click="pin.toggleClick()">Toggle</button>
            </div>
            
            <div class="form-group" ng-show="pin.rangeShow()">
                <label for="pin-{{pin.id}}-range">Range: </label>
                <input type="number" id="pin-{{pin.id}}-range" min="2" max="65535" class="form-control" ng-model="pin.range" ng-change="pin.rangeChange()" />
            </div>
            
            <div class="form-group" ng-show="pin.frequencyShow()">
                <label for="pin-{{pin.id}}-frequency">Frequency: </label>
                <input type="number" id="pin-{{pin.id}}-frequency" min="1" max="{{pin.frequencyMax()}}" class="form-control" ng-model="pin.frequency" ng-change="pin.frequencyChange()" />
            </div>
        </form>
        </div>
    </div>
</div>